<template>
	<view class="wrap">
		<view class="tabs-list">
			<u-tabs :list="tablist" :is-scroll="false" height="100" active-color="#288EED" inactive-color="#333333"
				:bold="false" font-size="30" bar-height="3" bar-width="365" :current="current" @change="tabchange">
			</u-tabs>
		</view>
		<!-- 列表 -->
		<view class="school-body">
			<!-- 未配送 -->
			<view class="historylist" v-if="current == 0">
				<scroll-view scroll-y style="height: 100%;width: 100%;" v-if="weiList.length"  @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="li" v-for="(item,index) in weiList" :key="index">
							<view class="li-top">
								<u-section :title="'订单时间:'+ item.date" :bold="false" font-size="30" sub-color="#999999"
									line-color="#288EED" color="#333333" sub-title="未配送" :right="true" :arrow="false">
								</u-section>
							</view>
							<view class="li-content">
								<scroll-view class="scroll-view_H" scroll-y="false" scroll-x="true">
									<view class="con-list">
										<view class="con" v-for="(caiitem,caiindex) in item.cailist" :key="caiindex">
											<image :src="baseurl+caiitem.image" class="con-img" mode="aspectFit">
											</image>
											<view class="con-title">
												{{caiitem.cai_name}}
											</view>
										</view>
									</view>
								</scroll-view>
								<view class="li-content-num">
									共{{item.count}}件
								</view>
							</view>
							<view class="li-bottom">
								<view class="li-bottom-left">
				
								</view>
								<view class="li-bottom-right">
									<view class="bot-btn" @click="goUrl('./nmorderdetail?order_id='+item.order_id)">
										查看详情
									</view>
								</view>
							</view>
						</view>
					
						<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</scroll-view>
				<view class="" v-if="weiList.length == 0" style="margin-top: 330rpx;">
					<u-empty text="" mode="order"></u-empty>
				</view>
				
			</view>
			<!-- 历史订单 -->
			<view class="historylist" v-if="current == 1">
				<scroll-view scroll-y style="height: 100%;width: 100%;" v-if="historyList.length" @scrolltolower="reachBottom">
					<view class="page-box">
						<view class="li" v-for="(item,index) in historyList" :key="index">
							<view class="li-top">
								<u-section :title="'订单时间:'+ item.date" :bold="false" font-size="30" sub-color="#999999"
									line-color="#288EED" color="#333333" sub-title="已完成" :right="true" :arrow="false">
								</u-section>
							</view>
							<view class="li-content">
								<scroll-view class="scroll-view_H" scroll-y="false" scroll-x="true">
									<view class="con-list">
										<view class="con" v-for="(caiitem,caiindex) in item.cailist" :key="caiindex">
											<image :src="baseurl+caiitem.image" class="con-img" mode="aspectFit">
											</image>
											<view class="con-title">
												{{caiitem.cai_name}}
											</view>
										</view>
									</view>
								</scroll-view>
								<view class="li-content-num">
									共{{item.count}}件
								</view>
							</view>
							<view class="li-bottom">
								<view class="li-bottom-left">

								</view>
								<view class="li-bottom-right">
									<view class="bot-btn" @click="goUrl('./nmorderdetail?order_id='+item.order_id)">
										查看详情
									</view>
								</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</scroll-view>
				<view class="" v-if="historyList.length == 0" style="margin-top: 300rpx;">
					<u-empty text="" mode="order"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: "",
				tablist: [{
					name: '未配送'
				}, {
					name: '历史订单'
				}],
				weiList: [], //未配送
				historyList: [], //历史订单
				historyListPage: 0,
				weiListPage:0,
				current: 0,
				loadStatus: ['loadmore', 'loadmore'],
			}
		},
		onLoad() {
			this.baseurl = this.$u.http.config.baseUrl

            //未配送
			this.weiListJK();
			
            //历史订单
			this.historyListJK();
		},
		// computed: {
		// },
		methods: {
			//跳转连接
			goUrl(url) {
				setTimeout(() => {
					uni.navigateTo({
						url: url
					});
				}, 200)
			},
			//未配送
			weiListJK(){

				var page = this.weiListPage + 1;
				let form = {
						type: 2, // 1客户 2农贸
						page: page,
						status: 3, //状态:1=备货,2=拣货,3=配送
						deliverydata: 0, //配送状态:0=未配送,1=配送中,2=配送完成
				};
				this.$u.post('api/farm/caiOrderList', form).then(res => {
					if (res.data.length) {
						let weiList =  this.weiList
						this.weiList = weiList.concat(res.data)
						this.weiListPage = page;
						this.loadStatus.splice(this.current, 1, "loadmore")
					} else {
						this.loadStatus.splice(this.current, 1, "nomore")
					}
				
				})
			},
			//加载下一页
			reachBottom() {
				if (this.current == 1) {
					this.loadStatus.splice(this.current, 1, "loading")
					setTimeout(() => {
						this.historyListJK();
					}, 1200);
				}else{
					this.loadStatus.splice(this.current, 1, "loading")
					setTimeout(() => {
						this.weiListJK();
					}, 1200);
				}
				
			},
			//农贸历史订单接口
			historyListJK() {
				var page = this.historyListPage + 1;
				let form = {
					type: 2, // 1客户 2农贸
					page: page,
					status: 3, //状态:1=备货,2=拣货,3=配送
					deliverydata: 2, //配送状态:0=未配送,1=配送中,2=配送完成
				};
				this.$u.post('api/farm/caiOrderList', form).then(res => {
					if (res.data.length) {
						let historyList =  this.historyList
						this.historyList = historyList.concat(res.data)
						this.historyListPage = page;
						this.loadStatus.splice(this.current, 1, "loadmore")
					} else {
						this.loadStatus.splice(this.current, 1, "nomore")
					}
				
				})
			},
			
			//接口
			orderlist(form){

			},
			tabchange(index) {
				this.current = index;
			},
			selectOne(options) {
				this.selecValue = options.label
				let feemoban_id = options.value

				let current = this.current
				let school_ids = [];
				if (current == 0) {
					this.schoolList.forEach(val => {
						if (val.checked) {
							school_ids.push(val.id);
						}
					})
				} else {
					this.schoolListwei.forEach(val => {
						if (val.checked) {
							school_ids.push(val.id);
						}
					})
				}
				if (school_ids.length == 0) {
					this.$u.toast("请选择学校")
					return;
				}
				this.$u.post('api/school/schoolbumenmobanupdate', {
					feemoban_id: feemoban_id,
					school_ids: school_ids
				}).then(res => {
					this.$u.toast("成功")
					this.schoolListjk(1)
					this.schoolListjk(2)
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8F8F7;
		color: #333333;
	}

	.weipeisong {
		height: 100%;
		overflow-y: auto;
	}
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;

	}

	.school-body {
		flex: 1;
		overflow: hidden;
		// overflow-y: scroll;
	}

	.historylist {
		height: 100%;
		box-sizing: border-box;
		padding-top: 30rpx;

		.li {
			margin: 0 40rpx 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			overflow: hidden;

			.li-top {
				//height: 90rpx;
				line-height: 90rpx;
				padding-right: 20rpx;
			}

			.li-content {
				position: relative;
				//height: 220rpx;
				overflow: hidden;

				.scroll-view_H {
					height: auto;

					.con-list {
						display: flex;

						.con {
							display: flex;
							flex-direction: column;
							margin-left: 20rpx;
							width: 141rpx;

							.con-img {
								width: 141rpx;
								height: 141rpx;
								background: #FFFFFF;
								border: 2rpx solid #F0F0F0;
								border-radius: 4rpx;
							}

							.con-title {
								text-align: center;
								line-height: 80rpx;
								color: #333333;
								font-size: 24rpx;
							}
						}
					}
				}

				.li-content-num {
					display: flex;
					padding: 0 15rpx;
					align-items: center;
					height: 100%;
					vertical-align: middle;
					text-align: center;
					position: absolute;
					right: 0;
					top: 0;
					background: #FFFFFF;
					opacity: 0.83;
					z-index: 10;
					color: #333333;
					font-size: 24rpx;
				}
			}

			.li-bottom {
				display: flex;
				align-items: center;
				height: 50rpx;
				justify-content: space-between;
				margin: 10rpx 20rpx 35rpx;

				.li-bottom-right {
					display: flex;

					.bot-btn {
						width: 128rpx;
						line-height: 46rpx;
						background: #FFFFFF;
						border: 2rpx solid #288EED;
						border-radius: 4rpx;
						text-align: center;
						font-size: 24rpx;
						color: #288EED;
					}
				}
			}
		}

	}
</style>
